<template>
	<view class="result">
		<view class="bg acea-row row-middle row-center">
			<view class="title">你本次考试成绩是：</view>
			<view class="fraction acea-row row-column row-middle row-center">
				<view class="chengji">98分</view>
				<view style="height: 60rpx;width: 100rpx;"></view>
				<view class="tips" >满分100分</view>
			</view>
			<view class="left"></view>
			<view class="right"></view>
		</view>
		
		<view class="acea-row row-center row-middle content">
			<view class="acea-row row-middle row-center row-column">
				<view class="color666 fs-28">超越人数</view>
				<view class="themecolor fs-52 bold mt10">98.88%</view>
				<view class="comeon">继续加油</view>
			</view>
			<view class="xian"></view>
			<view>
				<image class="result02" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/result02.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<view class="submit" @click="submit">立即提交</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			submit(){
				uni.redirectTo({
					url: '/pages/answer/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #ffffff !important; }
	.result{
		
		.bg{
			width: 100%;
			height: 500rpx;
			background: #FD7D36;
			position: relative;
			overflow: hidden;
			
			.fraction{
				width: 300rpx;
				height: 300rpx;
				background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/result-c.png');
				background-size: 100% 100%;
				color: #ffffff;
			}
			.left{
				width: 300rpx;
				height: 300rpx;
				background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/result-c.png');
				background-size: 100% 100%;
				position: absolute;
				bottom: -170rpx;
				left: -80rpx;
			}
			.right{
				width: 300rpx;
				height: 300rpx;
				background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/result-c.png');
				background-size: 100% 100%;
				position: absolute;
				bottom: -141rpx;
				right: -38rpx;
			}
			.chengji{
				font-size: 82rpx;
			}
			.tips{
				font-size: 22rpx;
			}
			
			.title{
				color: #ffffff;
				font-size: 28rpx;
				position: absolute;
				top: 30rpx;
				left: 30rpx;
			}
		}
	
		.content{
			width: 690rpx;
			margin: 0 auto;
			border-bottom: 4rpx dashed #DFDFDF;
			padding: 50rpx;
			
			.comeon{
				width: 220rpx;
				height: 76rpx;
				background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/result01.png');
				background-size: 100% 100%;
				color: #FD7D36; 
				font-size: 28rpx;
				line-height: 95rpx;
				text-align: center;
			}
			.xian{
				width: 4rpx;
				height: 150rpx;
				background-color: #DFDFDF;
				margin: 0 50rpx;
			}
			.result02{
				width: 220rpx;
				height: 220rpx;
			}
		}
		
		.submit{
			width: 604rpx;
			height: 108rpx;
			background: rgba(247, 118, 0, 0.3);
			color: #FD7D36;
			font-size: 40rpx;
			border-radius: 60rpx;
			margin: 150rpx auto 0 auto;
			text-align: center;
			line-height: 108rpx;
		}

		
		
	}
</style>
